<template>
  <div class="study-plan">
    <van-nav-bar
      title="作业审批"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content">
      <div class="cont">
        作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述
      </div>
      <div class="assi-title">作业要求</div>
      <div class="cont">
        作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述
      </div>
      <div class="assi-title">最晚提交时间</div>
      <div class="cont">2023-03-22</div>
      <div class="assi-title">作业附件</div>
      <div class="list-t">
        <div class="list" v-for="i in 3" :key="i">
          <div class="list-img">
            <img src="@img/zip.png" alt="" />
          </div>
          <div class="list-info">
            <div class="list-title">作业文件.zip</div>
            <div class="list-size">172.KB</div>
          </div>
        </div>
      </div>
      <div class="spr">
        <div class="assi-title">作业审批</div>
        <div class="cont">
          <van-row>
            <van-col :span="12">
              <div class="c-l">
                <i>*</i>作业评分
                <van-switch
                  v-model="checked"
                  active-color="#00D0AB"
                  inactive-color="#dcdee0"
                  size="18px"
                />
                精品
              </div>
            </van-col>
            <van-col :span="12">
              <div class="all-pic">
                <van-cell-group inset>
                  <van-field v-model="value" placeholder="满分100合格80" />
                </van-cell-group>
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="assi-title ismint">
          <span class="jg">作业结果</span>
          <span class="hg">合格</span>
        </div>
        <div class="arext">
          <van-cell-group inset>
            <van-field
              v-model="message"
              rows="3"
              autosize
              type="textarea"
              maxlength="30"
              placeholder="请输入作业建议"
              show-word-limit
            />
          </van-cell-group>
        </div>
      </div>

      <div class="spr">
        <div class="assi-title">审批作业</div>
        <div class="cont" style="height: 56px">
          <van-row>
            <van-col :span="18">
              <div class="c-l">
                <i>*</i>作业评分
              </div>
            </van-col>
            <van-col :span="6">
              <div class="all-pic">
                <van-cell-group inset>
                  <van-field v-model="value" placeholder="请输入" />
                </van-cell-group>
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="arext">
          <van-cell-group inset>
            <van-field
              v-model="message"
              rows="3"
              autosize
              type="textarea"
              maxlength="30"
              placeholder="请输入作业建议"
              show-word-limit
            />
          </van-cell-group>
        </div>
      </div>
    </div>
    <div class="btn">
      <footer-button
        @click="show = true"
        title="提交批阅"
        color="linear-gradient(to right,#1BCD74,#1CA893)"
      ></footer-button>
    </div>
    <van-action-sheet
      style="background: #ffffff"
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
import FooterButton from "@/components/FooterButton.vue";
export default {
  components: {
    FooterButton,
  },
  data() {
    return {
      checked: true,
      message: "",
      show: false,
      value: "",
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
    };
  },
  methods: {
    back() {
      window.history.back();
    },
    onSelect(v) {
      console.error(v.name);
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  background: #ffffff;
  min-height: 100vh;
  ::v-deep(.van-nav-bar__placeholder) {
    background: #ffffff;
  }
  &__content {
    padding: 12px 16px 102px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    .cont {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #272b2d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      i {
        color: red;
        padding-right: 4px;
      }
      .c-l {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #272b2d;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        ::v-deep(.van-switch) {
          vertical-align: middle;
          margin-left: 8px;
          margin-right: 4px;
        }
      }
      .all-pic {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #b9bdbd;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        //padding: 4px 26px;
        border-radius: 4px;
        border: 1px solid #cdcdcd;
        ::v-deep(.van-field) {
          padding: 0;
          text-align: center;
        }
        ::v-deep(.van-field__control) {
          text-align: center;
        }
      }
    }
    .assi-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #171a1d;
      line-height: 25px;
      text-align: left;
      font-style: normal;
      margin-top: 10px;
      padding: 22px 0 9px 0;
    }
    .ismint {
      display: flex;
      justify-content: space-between;
      .jg {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #272b2d;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
      .hg {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #0dc678;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
    }
    .arext {
      background: #f4f4f4;
      border-radius: 4px;
      ::v-deep(.van-field) {
        padding: 12px 11px 8px 0;
      }
    }
    .list {
      display: flex;
      padding: 13px 0;
      .list-img {
        width: 46px;
        height: 46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .list-info {
        flex: 1;
        padding-left: 10px;
        .list-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #171a1d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          padding-bottom: 4px;
        }
        .list-size {
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 400;
          font-size: 14px;
          color: rgba(23, 26, 29, 0.4);
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .spr {
      position: relative;
      .sp-type {
        position: absolute;
        right: 0;
        bottom: 0;
        img {
          width: 63px;
          height: 63px;
        }
      }
    }
  }
  .btn {
    padding: 16px 21px;
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
}
</style>
